<template>
  <el-card style="width: 100wh;height: 100vh;">
    <template #header>
      <div class="card-header">
        <span>商品分类</span>
		<el-button type="primary" :icon="CirclePlus" round @click="handleDialog()">添加分类</el-button>
      </div>
    </template>
	<el-table :data="tableData.list" stripe style="width: 100%">
		<el-table-column prop="id" label="Id" width="180" />
		<el-table-column prop="name" label="名称" width="180" />
		<el-table-column fixed="right" label="操作" min-width="180">
		<template #default="scope"><!-- v-slot: == # -->
		<el-button  type="success" size="small" @click="handleDialog(scope.row)">修改</el-button>
		<el-button  type="danger" size="small" @click="open(scope.row.id)">删除</el-button>
		</template>
		</el-table-column>
	</el-table>
  <!--  <template #footer>Footer content</template> -->
  <AddCategoryVue ref="addCategory" :dialogTitle="dialogTitle" :tableRow="tableRow" ></AddCategoryVue>
   

   
    
   
  </el-card>
  
</template>

<script setup>
// const tableData = [
//   {
//     id: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     id: '2016-05-02',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     id: '2016-05-04',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     id: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]

import {reactive,onMounted,ref,provide} from 'vue'
import axios from "@/api/api_config"
import AddCategoryVue from '@/components/AddCategory.vue'
import {isNull} from "@/utils/filter"
import { ElMessage, ElMessageBox } from 'element-plus'
///------------------------

const tableData =reactive({list:[]})
const addCategory = ref(null)//获取子组件实例
const dialogTitle=ref("")
const tableRow=ref({})
///------------------------
onMounted(()=>{
	getList()
})

//获取分类信息
const getList=()=>{
	return axios.get('/category').then((res)=>{
		tableData.list = res.data
		console.log(res,"获取数据")
	})
}
provide("getList",getList)//依赖 提供

//打开分类页
const handleDialog=(row)=>{
	if(isNull(row)){
		dialogTitle.value="添加分类"
	}else{
		dialogTitle.value="修改分类"
		tableRow.value = row
	}
	
	addCategory.value.dialogCategory()//调用子组件的方法
}
//删除
const open=(id)=>{
  ElMessageBox.confirm('你确定要删除吗?','信息提示',
	{
	confirmButtonText: '确定',
	cancelButtonText: '取消',
	type: 'warning',
	}
	)
	.then(() => {
		console.log(id)
		//删除操作
		axios.delete(`/Category/${id}`).then(()=>{
			ElMessage({
			type: 'success',
			message: '删除成功！',
			})
			//重新加载数据
			getList()
		})

	})
	.catch(() => {
	ElMessage({
	type: 'info',
	message: '删除取消',
	})
	})
}


</script>

<style>
	.card-header{
		display:flex;
		justify-content: flex-start;
		align-items: center;
		gap:10px;
		
	}
</style>